// style config
$title_b:#fafafa !default; //标题栏背景色
$side_b:#f4f4f4 !default; //描边 & 模块分割底色
$side_strong:#cacaca !default; //按钮描边

$divider_b: #E5E5E5 !default; //divider分割线
$hint_b: #888888 !default; //hint & disable
$icon_b: #666666 !default; //icon & secondary
$text_b: #222222 !default; //text
$divider_w: rgba(white, .12) !default; //divider
$hint_w: rgba(white, .3) !default; //hint disable
$icon_w: rgba(white, .7) !default; //icon secondary
$text_w: rgb(255, 255, 255) !default; //text
//color-ji
// $title_b:#f7f7f7 !default;
//mei
// $mei_red:#e74c75 !default;
//status
$success_green:#03b266 !default;
$fail_red:#ff4444 !default;
$warn_yellow:#fc7e36 !default;
$common_blue: #318FE2 !default;
$disable:#898183 !default;

$disable_bg: #F7F8F9;
$disable_c:#B3B9C1;
$readOnly_c:#787E85;
$readOnly_bg:#F7F8F9;
//shadow
$shadow_color: 0 2px 2px 0 rgba(0, 0, 0, 0.05),
0 1px 4px 0 rgba(0, 0, 0, 0.08),
0 3px 1px -2px rgba(0, 0, 0, 0.2) !default;
//paper
$paper_color: #fff !default;

// Gobal
$w_space: -5px !default;
$theme_color:#26a597 !default;

// input
$input_border_color: $divider_b !default;
$input_outline_color: $theme_color !default;
$input_radius: 0px !default;
$input_fs: 14px !default;
$placeholder_b: #cccccc !default; //input 级别的提示
$placeholder_fs: 14px !default;
$checkbox_default_bg:#F6F8F9 !default;
$checkbox_default_c: inherit !default;
$checkbox_focus_bg: $theme_color !default;
$checkbox_focus_c: inherit !default;
$select_hover_color:$text_b !default;

// btn
$hoverWaveColor: $theme_color !default;
$btn_radius: 3px !default;
$btn_action_radius: 50px !default;
$btn_fs: 12px !default;

// table
$table_odd_bg: #F6F8F9 !default;
$table_header_bg: #fff !default;
$table_header_c: #787E85 !default;
$table_header_fs: 14px !default;
$table_hover: #E8EBED !default;

// steps
$steps_bar_bg:$table_odd_bg !default;

// tab
$tab_top_color:$side_b !default;
$tab_active_color:$theme_color !default;

// ---------------------------模板------------------------
@mixin cicle($size:28px) {
    flex-shrink: 0;
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: 100%; // border: solid 1px #ccc;
    overflow: hidden;

    >img {
        width: 100%;
        height: 100%;
    }
}

@mixin square($size:28px) {
    flex-shrink: 0;
    display: inline-block;
    width: $size;
    height: $size;
    overflow: hidden;

    >img {
        width: 100%;
        height: 100%;
    }
}

@mixin paper($radius) {
    background: $paper_color;
    border-radius: $radius;
}

@mixin flex($scale:1) {
    display: block;
    flex: $scale;
}

@mixin animate($time:0.3s) {
    transition: all $time;
}

@mixin shadow($color:$shadow_color) {
    box-shadow: $color;
}

//限制一行的情况需要另外处理
@mixin ellip($row:2) {
    display: -webkit-box;
    overflow: hidden;
    box-orient: vertical;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

@mixin btn($size:0px) {
    display: inline-block;
    border-radius: $size;
    text-align: center;
    cursor: pointer;

    &:disabled {
        cursor: not-allowed;
        background-color: $disable !important;
    }

    &:active {
        opacity: .8;
    }

    outline: none !important;

    &:focus {
        outline: none !important;
    }
}

@mixin hoverWave($hoverColor:$hoverWaveColor) {
    position: relative;
    overflow: hidden;

    &:after {
        content: '';
        position: absolute;
        top: 50%;
        right: -100%;
        transform: scale(0);
        width: 100%;
        height: 100%;
        border-radius: 200px;
        background-color: rgba($color:$hoverColor, $alpha: .1);
        // background-color: $hoverColor;
        transition: all .3s;
        // z-index: -1;
    }

    &:hover {
        &:after {
            transform: scale(3.5);
            left: -100%;
            right: unset;
        }
    }
}

@mixin disableOutline() {
    outline: none !important;

    &:focus {
        outline: none !important;
    }
}

@import './varConfig.scss';
@import './mixin/mixin.scss';
// @import './global.scss';
@import './reset.scss';
@import './tab.scss';
@import './input.scss';
@import './alertMsg.scss';
@import './newBalance.scss';
@import './geometry.scss';
@import './3dtransform.scss';
@import './progress.scss';
@import './loading.scss';
@import './nav.scss';
@import './menu.scss';
@import './icon.scss';
@import './slideBar.scss';
@import './comment.scss';
@import './img.scss';
@import './toggler.scss';
@import './bug.scss';
@import './table.scss';
@import './paging.scss';
@import './step.scss';

// ----------------------------------基础布局样式----------------------------------------
$space: 2;

@for $i from 0 to 128 {
    $p_var: $i*$space;

    .p#{$p_var} {
        padding: $p_var * 1px;
    }

    .pl#{$p_var} {
        padding-left: $p_var * 1px;
    }

    .pr#{$p_var} {
        padding-right: $p_var * 1px;
    }

    .pt#{$p_var} {
        padding-top: $p_var * 1px;
    }

    .pb#{$p_var} {
        padding-bottom: $p_var * 1px;
    }

    .ptb#{$p_var} {
        padding-top: $p_var * 1px;
        padding-bottom: $p_var * 1px;
    }

    .plr#{$p_var} {
        padding-left: $p_var * 1px;
        padding-right: $p_var * 1px;
    }
}

@for $i from 0 to 128 {
    $p_var: $i*$space;

    .m#{$p_var} {
        margin: $p_var * 1px;
    }

    .ml#{$p_var} {
        margin-left: $p_var * 1px;
    }

    .mr#{$p_var} {
        margin-right: $p_var * 1px;
    }

    .mt#{$p_var} {
        margin-top: $p_var * 1px;
    }

    .mb#{$p_var} {
        margin-bottom: $p_var * 1px;
    }

    .mtb#{$p_var} {
        margin-top: $p_var * 1px;
        margin-bottom: $p_var * 1px;
    }

    .mlr#{$p_var} {
        margin-left: $p_var * 1px;
        margin-right: $p_var * 1px;
    }
}

@for $i from 0 to 17 {
    $w_var: $i*32;

    .w#{$w_var} {
        width: $w_var * 1px;
    }
}

@for $i from 0 to 17 {
    $h_var: $i*32;

    .h#{$h_var} {
        height: $h_var * 1px;
    }
}

//position
.p-r {
    position: relative;
}

.p-a {
    position: absolute;
}

.l0 {
    left: 0;
}

.r0 {
    right: 0;
}

.t0 {
    top: 0;
}

.b0 {
    bottom: 0;
}

//overflow
.ov-h {
    overflow: hidden;
}

.ov-a {
    overflow: auto;
}

// display系列
.d-il {
    display: inline-block;
}

.d-b {
    display: block;
}

.d-i {
    display: inline;
}

.d-n {
    display: none;
}

.d-f {
    display: flex;
}

// 宽度系列
.w-full {
    width: 100%;
}

.w288 {
    width: 288px;
}

.w64 {
    width: 64px;
}

.w128 {
    width: 128px;
}

// 高度系列
.h48 {
    height: 48px;
}

.h56 {
    height: 56px;
}

// 居中系列
.ta-r {
    text-align: right;
}

.ta-l {
    text-align: left;
}

.ta-c {
    text-align: center;
}

.ta-j {
    text-align: justify;
}

.va-t {
    vertical-align: top;
}

.va-m {
    vertical-align: middle;
}

.va-b {
    vertical-align: bottom;
}

.v-h {
    visibility: hidden;
}

.v-v {
    visibility: visible;
}

// 定位系列
.pos-a {
    position: absolute;
}

.pos-r {
    position: relative;
}

.pos-f {
    position: fixed;
}

// flex布局系列
.flex1 {
    // @include flex();
    flex: 1;
}

.flex2 {
    // @include flex(2);
    flex: 2;
}

.flex3 {
    // @include flex(3);
    flex: 3;
}

.flex4 {
    // @include flex(4)
    flex: 4;
}

.ac {
    align-items: center;
}

.as {
    align-items: stretch;
}

.ai-b {
    align-items: baseline;
}

.fw {
    flex-wrap: wrap
}

.fd-c {
    flex-direction: column;
}

.jc-b {
    justify-content: space-between;
}

.jc {
    justify-content: center;
}

.jc-r {
    justify-content: flex-end;
}

.jc-l {
    justify-content: flex-start;
}

.s0 {
    flex-shrink: 0;
}

// 字体系列
.fs0 {
    font-size: 0px;
}

.fs10 {
    font-size: 10px;
}

.fs12 {
    font-size: 12px;
}

.fs14 {
    font-size: 14px;
}

.fs16 {
    font-size: 16px;
}

.fs18 {
    font-size: 18px;
}

.fs20 {
    font-size: 20px;
}

.fs24 {
    font-size: 24px;
}

.fs34 {
    font-size: 34px;
}

.fs45 {
    font-size: 45px;
}

.fs56 {
    font-size: 56px;
}

// 边框系列
.bor {
    border: solid 1px;
}

.bor-t {
    border-top: solid 1px;
}

.bor-b {
    border-bottom: solid 1px;
}

.bor-l {
    border-left: solid 1px;
}

.bor-r {
    border-right: solid 1px;
}

// 层级系列
.z-1 {
    z-index: -1;
}

.z1 {
    z-index: 1;
}

.z9 {
    z-index: 10;
}

.z10 {
    z-index: 10;
}

.z99 {
    z-index: 99;
}

.z500 {
    z-index: 500;
}

//lineHeight
.lh48 {
    line-height: 48px;
}

// 背景系列
.bg-w {
    background-color: #fff;
}

.bg-b {
    // background-color: rgba($color:black, $alpha: .8);
    background-color: #000;
}

.bg-module {
    background-color: #f4f4f4; //模块分割底色
}

.bg-title {
    background-color: #fafafa; //title 底色
}

.bg-disable {
    background-color: $disable;
}

.bg-tempt {
    background-color: rgba(black, .7)
}

.bg-placeholder {
    background-color: $placeholder_b
}

.bg-divider {
    background-color: $divider_b
}

.bg-hint {
    background-color: $hint_b
}

.bg-icon {
    background-color: $icon_b
}

.bg-text {
    background-color: $text_b
}

.bg-side {
    background-color: $side_b
}

.bg-side-s {
    background-color: $side_strong
}

.tp {
    background-color: transparent;
}

//渐变色
.bg-mei-red {
    background-image: linear-gradient(-117deg, #D5466C 0%, #FA5B52 100%);
}

.bg-mei-yel {
    background-image: linear-gradient(-138deg, #FCB719 0%, #F6A346 100%);
}

.bg-blue {
    background-color: $common_blue;
}

.bg-theme {
    background-color: $theme_color;
}

// 状态色
.bg-success {
    background-color: $theme_color !important;
}

.bg-fail {
    background-color: $fail_red;
}

.bg-warn {
    background-color: $warn_yellow;
}

// 颜色系列
.c-divider-b {
    color: $divider_b;
}

//divider
.c-hint-b {
    color: $hint_b;
}

//hint disable
.c-icon-b {
    color: $icon_b;
}

//icon secondary
.c-text-b {
    color: $text_b;
}

//text
.c-divider-w {
    color: $divider_w;
}

//divider
.c-hint-w {
    color: $hint_w;
}

//hint disable
.c-icon-w {
    color: $icon_w;
}

//icon secondary
.c-text-w {
    color: $text_w;
}

//text
.c-blue {
    color: $common_blue;
}

// 状态色
.c-success {
    color: $success_green;
}

.c-fail {
    color: $fail_red;
}

.c-warn {
    color: $warn_yellow;
}

.c-placeholder {
    color: $placeholder_b;
}

//色
.c-red {
    color: $fail_red;
}

.c-theme {
    color: $theme_color;
}

.b-theme {
    border-color: $theme_color;
}

.b-fail {
    border-color: $fail_red;
}

.b-warn {
    border-color: $warn_yellow;
}

.b-side {
    border-color: $side_b;
}

.b-side-s {
    border-color: $side_strong;
}

.op0 {
    opacity: 0;
}

.cp {
    cursor: pointer;
}

// ---------------------------------常用模块----------------------------
// 用于全屏居中（容器）
.center-fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.fullscreen {
    // width: 100vw;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

.box {
    box-sizing: border-box;
}

.shadow {
    @include shadow($shadow_color)
}

.cicle36 {
    @include cicle(36px)
}

.square48 {
    @include square(48px)
}

.square56 {
    @include square(56px)
}

.square72 {
    @include square(72px)
}

.paper {
    @include paper(3px);
    @include shadow();
}

.paper6 {
    @include paper(6px);
    @include shadow();
}

//文字限制几多行后就出现省略号
.ellip1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ellip2 {
    @include ellip(2);
}

.ellip3 {
    @include ellip(3);
}

details {
    summary {
        outline: none;
        cursor: pointer;
        // cursor: pointer;
        // pointer-events: none;
    }

}

//inline button 边距跟字体大小自己调
.btn {
    @include btn($btn_radius);
    border: none;
}

//常用的绿色按钮
.btn-n {
    @include btn($btn_radius);
    @include hoverWave(#fff);
    @extend .bg-theme;
    border: none;
    color: $text_w;
}

//常用的白色按钮
.btn-w {
    @include btn($btn_radius);
    @extend .bg-w; // border-color: $side_strong;
    color: $icon_b;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        transform: scale(0.5);
        border-style: solid;
        border-width: 1px;
        border-color: $side_strong;
        border-radius: 3px;
    }
}

//常用的镂空按钮
.btn-hollow {
    @include btn($btn_radius);
    @include hoverWave(#fff);
    @extend .tp;
    @extend .bor;
    border-color: $theme_color;
    color: $theme_color;
    cursor: pointer;
}

//常用镂空tag
// .tag-hollow {
//     @include disableOutline();
//     @include hoverWave(#fff);
//     @extend .tp;
//     @extend .bor;
//     border-color: $theme_color;
//     color: $theme_color;
//     cursor: pointer;
// }

//操作按钮
.btn-action {
    @include btn($btn_action_radius);
    // @include hoverWave($theme_color);
    color: $theme_color;
    border: none;
    transition: background .3s ease-out, color .3s ease-out;
    cursor: pointer;

    &:hover {
        background-color: $theme_color;
        color: #fff;
    }
}

//常用纯文字tag
.tag-text {
    @include disableOutline(); // @include hoverWave($theme_color);
    @include btn($btn_radius);
    @include hoverWave();
    @extend .tp;
    border: none;
    color: $theme_color;
    cursor: pointer;
}

.stereo-btn {
    // padding: 10px 20px;
    outline: none;
    border: none;
    border-radius: 10px;
    background-image: linear-gradient($common_blue, #3c9);
    box-shadow: 0 4px 0 $common_blue;
    cursor: pointer;
    text-shadow: 0 2px 2px #ccc;
    // font-size: 50px;
    color: #fff;
    transition: all .3s;

    &:active {
        box-shadow: 0 2px 0 $common_blue;
        transform: translate3d(0, 2px, 0);
    }
}

.height-limit-screen {
    max-height: 700px;
    overflow-y: scroll;
}

// 0.5px
.thin {
    position: relative;

    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid;
        width: 200%;
        height: 200%;
        content: "";
        transform: scale(.5);
        transform-origin: left top;
    }
}

[scrollbar='normal']::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
}

[scrollbar='normal']::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 2px;
    /* -webkit-box-shadow: inset 0 0 5px #fafafa; */
    background: #f4f4f4;
}

[scrollbar='normal']::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /* -webkit-box-shadow: inset 0 0 5px #fafafa; */
    border-radius: 2px;
    background: transparent;
}

[tableHover='normal'] {
    transition: background-color .3s;

    &:hover {
        background-color: rgba($color:$theme_color, $alpha: .1);
    }
}
